<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<el-select v-if="isRemote" remote-show-suffix @change="queryList" filterable remote :remote-method="remoteMethod" v-model="queryParams.code" class="zs-select-md zs-space-right-sm" placeholder="项目名称" clearable>
					<el-option v-for="item in selectData" :key="item.id" :label="item[projectNameAttr]" :value="item[projectValueAttr]" />
				</el-select>
				<el-select v-else remote-show-suffix @change="queryList" filterable v-model="queryParams.code" class="zs-select-md zs-space-right-sm" placeholder="项目名称" clearable>
					<el-option v-for="item in selectData" :key="item.id" :label="item[projectNameAttr]" :value="item[projectValueAttr]" />
				</el-select>
				<el-select @change="queryList" v-model="queryParams.bizType" class="zs-select-md zs-space-right-sm" placeholder="业态" clearable>
					<el-option v-for="item in dictObj.PROJECT_COMMERCIAL_ACTIVITIES" :key="item.id" :label="item.dictLabel" :value="item.dictValue" />
				</el-select>
				<el-select collapse-tags collapse-tags-tooltips multiple @change="queryList" v-model="queryParams.phases" class="zs-select-md zs-space-right-sm" placeholder="阶段" clearable>
					<el-option v-for="item in dictObj.PROJECT_STAGE" :key="item.id" :label="item.dictLabel" :value="item.dictValue" />
				</el-select>
				<!-- 弹出框的插槽-可自定义弹出框查询条件 -->
				<slot name="templateQueryPopover" :slotData="{ queryParams, queryList, slotDictObj: dictObj }">
					<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
						<template #reference>
							<el-button class="zs-btn-square-solid" :class="popoverSelectClass">
								<el-icon>
									<MoreFilled />
								</el-icon>
							</el-button>
						</template>
						<template #default>
							<el-select :teleported="false" multiple collapse-tags collapse-tags-tooltips @change="queryList" v-model="queryParams.investorList" class="zs-select-md zs-space-right-sm" placeholder="集团" clearable>
								<el-option v-for="item in dictObj.INVESTOR" :key="item.id" :label="item.dictLabel" :value="item.dictValue" />
							</el-select>
							<el-cascader placeholder="城市" @change="queryList" :teleported="false" :show-all-levels="false" ref="cascaderRef" v-model="queryParams.city" :options="citys" :props="cascaderProp" clearable class="zs-select-md zs-space-right-sm" />
							<!-- 弹出框内的插槽 -->
							<slot name="popoverWithinQuery" :slotData="{ queryParams, queryList, slotDictObj: dictObj }" />
						</template>
					</el-popover>
				</slot>
				<!-- v-btnPermi="{permis:[queryBtnPermi]}" -->
				<el-button class="zs-btn-plain" @click="queryList">查询</el-button>
			</span>
			<!-- 跟查询条件同行的操作按钮 -->
			<slot name="queryOperateBtn" />
		</div>
		<div class="zs-card zs-table-page-content">
			<hsPageTable rowKey="code" :loading="tableData.loading" :tableTips="projectTips || ['*面积：m²']" :total="tableData.total" :tableData="tableData.data" :cloumns="tableData.cloumns" @pageChange="pageChange">
				<template #column>
					<slot name="operation" />
				</template>
			</hsPageTable>
		</div>
	</div>
</template>

<script setup>
	import { reactive, ref, computed } from 'vue';
	import { useStore } from 'vuex';
	let store = useStore();
	const curPageSize = ref(store.state.uiPageSizeDefault);
	const props = defineProps({
		// 当前页
		currentPageType: { type: String },
		// 查询列表的接口
		queryInterface: { type: Function },
		// 项目自定义下拉列表接口
		downProjectInterface: { type: Function },
		// 设置列方法
		setTableCloumns: { type: Function },
		// 查询按钮权限标识
		queryBtnPermi: { type: String },
		// 项目Value取值
		projectValueAttr: { type: String, default: 'code' },
		// 项目name取值
		projectNameAttr: { type: String, default: 'name' },
		// 设置默认查询条件的方法
		setDefaultQuery: { type: Function },
		// 下拉查询条件
		downQueryParams: { type: Object },
		// 分页名称字段
		pageAttr: { type: String, default: 'pageNumber' },
		// 每页条数字段
		pageSizeAttr: { type: String, default: 'pageSize' },
		// 项目表格单位
		projectTips: { type: Array },
		// 是否需要远程搜索
		isRemote: { type: Boolean, default: true },
		// 是否默认查询（有时在使用时需要等待接口返回后手动查询）
		isDefaultQuery: { type: Boolean, default: true },
	});

	// 数据字典数据
	const dictObj = store.getters.getDictObj(['PROJECT_COMMERCIAL_ACTIVITIES', 'AUDIT_STATUS', 'PROJECT_AUDIT_STATUS', 'INVESTOR', 'versionStatus', 'PROJECT_STAGE']);
	// 业态字典对象
	let biztypeDict = {};
	dictObj.PROJECT_COMMERCIAL_ACTIVITIES.forEach(bizType => {
		biztypeDict[bizType.dictValue] = bizType;
	});
	// 审核状态字典对象
	let auditDict = {};
	dictObj.PROJECT_AUDIT_STATUS.forEach(eles => {
		auditDict[eles.dictValue] = eles;
	});
	// 集团字典表格转换
	let investorDict = {};
	// let defaultInvestorList = []
	dictObj.INVESTOR.forEach(ele => {
		investorDict[ele.dictValue] = ele;
		// ele.dictValue == 'KAI_FA' || defaultInvestorList.push(ele.dictValue)
	});
	// 城市数据
	let citys = JSON.parse(localStorage.getItem('addrTree')).list;
	citys.forEach(el => {
		el.child = el.childList;
	});
	// 城市props
	let cascaderProp = {
		children: 'child',
		label: 'name',
		value: 'code',
		emitPath: false,
		// multiple: true
	};

	// 阶段字典转换
	let stageDictObj = {};
	dictObj.PROJECT_STAGE.forEach(el => {
		stageDictObj[el.dictValue] = el;
	});

	// 查询条件
	let queryParams = reactive({
		name: '',
		projectCode: '',
		bizType: '',
		city: '',
		phases: [],
		investorList: [],
	});
	let popoverSelectClass = computed(() => {
		let fixedParamsKey = ['projectCode', 'bizType', 'phases'];
		let flg = false;
		for (var key in queryParams) {
			if (fixedParamsKey.indexOf(key) == -1) {
				let valType = Object.prototype.toString.call(queryParams[key]);
				if (valType == '[object Array]' && queryParams[key].length > 0) {
					flg = true;
					break;
				} else if (valType == '[object String]' && queryParams[key]) {
					flg = true;
					break;
				}
			}
		}
		return { 'zs-btn-square-solid-active': flg };
	});
	queryParams[props.pageAttr] = 1;
	queryParams[props.pageSizeAttr] = curPageSize;
	if (props.setDefaultQuery) {
		props.setDefaultQuery(queryParams);
	}
	// 表格数据
	let tableData = reactive({
		loading: false,
		data: [],
		total: 0,
		cloumns: [
			{ prop: props.projectNameAttr, label: '项目名称', align: 'left', width: '230' },
			{ prop: 'bizType', label: '业态', type: 'dict', width: '110', currentDict: biztypeDict },
			{ prop: 'phase', label: '阶段', type: 'dict', width: '110', currentDict: stageDictObj },
			{ prop: 'investor', label: '集团', type: 'dict', width: '110', currentDict: investorDict, multiple: { flg: true } },
			{ prop: 'cityName', label: '城市', width: '110' },
		],
	});
	let auditStatus = {
		prop: 'auditStatus',
		label: '审核状态',
		type: 'dict',
		currentDict: auditDict,
		isHaveClass: true,
		currentClass: row => {
			return { 'zs-approval-status-wait': row['auditStatus'] == 0, 'zs-approval-status-yes': row['auditStatus'] == 1, 'zs-approval-status-no': row['auditStatus'] == 9 };
		},
	};
	let auditTime = { prop: 'auditTime', label: '审核时间', type: 'date' };

	if (props.setTableCloumns) {
		tableData.cloumns = props.setTableCloumns(tableData.cloumns, auditStatus, auditTime);
	}

	// 分页变化时
	function pageChange(page) {
		queryParams[props.pageAttr] = page.current;
		queryParams[props.pageSizeAttr] = page.pageSize;
		queryList();
	}

	// 查询列表数据
	function queryList() {
		if (props.queryInterface) {
			tableData.loading = true;
			// 兼容以前未统一的查询字段projectCode
			queryParams.projectCode = queryParams.code;
			props.queryInterface(queryParams).then(res => {
				if (res.data.code === 200) {
					if (selectData.value.length == 0 && !props.downProjectInterface) {
						selectData.value = res.data.data.list;
					}
					tableData.data = res.data.data.list;
					tableData.total = res.data.data.total;
					tableData.loading = false;
				}
			});
		}
	}
	if (props.isDefaultQuery) {
		queryList();
	}

	let selectData = ref([]);
	function remoteMethod(txt) {
		if (!txt) {
			return;
		}
		let query = { name: txt };
		query[props.pageAttr] = 1;
		query[props.pageSizeAttr] = 100;
		props.queryInterface(query).then(res => {
			if (res.data.code === 200) {
				selectData.value = res.data.data.list;
			}
		});
	}
	defineExpose({ queryList });
</script>

<script>
	export default { name: 'hsProjectTemplate' };
</script>

<style lang="scss" scoped></style>
